<div class="page">
    <h1>数据表格 Table</h1>
    <div class="line"></div>
    <h3>数据表格 基本功能演示</h3>
    <br>
    <div id="tableText"></div>
    <br>
    <div id="getCheckValue" class="layui-btn">check取值</div>
    <div id="getRadioValue" class="layui-btn">radio取值</div>
    <br> <br>
    <div class="line"></div>
    <h2>基本参数使用说明</h2>
    <br>
    <pre class="line-numbers"><code class="language-js">// 数据参数详情在文档下方
var __table = new icu.table({
    tableOptions : {}, // 数据表格部分参数 
    cols : [], // 表格表头数据列,
    whereOptions : [], // 接收form表单元素全部参数,
    pagingOptions : {
        hasQuick: true, // 开启快速跳页
        limitPage: true, // 开启筛选分页
        countPage: true, // 开启总页数
        index : 1, // 初始页面序号
        count : 10, // 初始分页数量
    },
    whereButtons : [], // 跟在搜索条件右侧的按钮参数,
    rightButtons : [], // 右侧按钮参数
    getEvent : function (){ }, // 获取列表数据传值与赋值方法
    //  默认 数据默认关键字设置
    indexKey :'page', // 查询分页序号
    countKey :'limit', // 查询分页行数
    dataKey :'data', // 数据列表字段
    totalKey :'count', // 总条数字段
});</code></pre>
    <br>
    <div class="line"></div>
    <h2>tableOptions 表格主体参数说明</h2>
    <br>
    <pre class="line-numbers"><code class="language-js">tableOptions  // 对象类型,表格主体基本参数 
{
    title: '表格数据', // 表格标题,用于修改表格下载文件时的文件名
    // 注意:此处文件名控制为静态数据生成的文件名。
    // 后台下载文件,需要后台处理并下载文件名。
    class: 'FD-UI', // 默认Class标头字段,可自定义进行修改。
    theme: 'default', // 默认皮肤字段,可自定义来修改全局Class样式
    minWidth: 120, // 单元格最小宽度
    height: false, // 设置表格高度。 内容超出表格高度则自动显示滚动条
    titleAlign: 'left', // 整体控制标题栏 浮动设置
}   
</code></pre>
    <br>
    <div class="line"></div>
    <h2>cols 表格表头参数</h2>
    <br>
    <pre class="line-numbers"><code class="language-js">cols // 数组类型
// 注 : buttons checkBox radio 类型,不会被添加到打印、导出的方法字段中
[   
    // v1.0.1 新增 start
    {
        key: "index",  // 由于序号字段不存在 在后台返回的数据中,需要自定义关键字,暂定为 index , 可更改
        type: 'index', // 序号类型
        width: '90px', // 表格宽度 :
        name: '序号',
        titleAlign: 'center', // 控制表头是否居中
        textAlign: 'center', // 控制单元格内容是否居中
    },
    // v1.0.1 新增 end
    {
        type: 'checkBox', // 开启 checkBox 选项
        width: '40px', // 宽度设置
    }, {
        type: 'radio', // 开启 radio 选项
        width: '40px', // 宽度设置
    }, {
        key: 'C',// 表头关键字
        sort: true, // 是否开启排序方法
        type: 'string', // 类型
        name: 'C', // 表头显示字段
    }, {
        key: 'S', // 表头关键字
        type: 'OptionSide:Gender',  // 此类型接收字典设置参数,参见 OptionSide 组件 与 select 组件
        // 扩展 OptionSide:Gender:value:label
        // 意义 : 字典类型数据:字典关键字: 数据值字段: 显示字段

        name: '字符串', // 表头显示字段
        width: '300px', // 表格宽度  可设置 px 参数 或者 '20%' 的百分比参数
        // 百分比参数相加之和可以超过100%,超过时显示横向滚动条

        sort: true, // 是否开启排序方法
        // 注意:此处排序为数据排序,并非显示字段的排序

        format: function (data, value, ele, events) { // 格式化方法
            // data 当前行数据字段
            // value 处理之后的显示字段
            // ele 当前表格元素单元格 HTML 的jquery 对象
            // 注意 : ele 可执行全部 jquery 方法,但请不要破坏表格结构
            // 如果添加了行单击事件或者双击事件,请在此处 使用阻止冒泡方法来方式事件冒泡
            ele.click((e) => {
                // 阻止冒泡方法
                e.stopPropagation();
                e.preventDefault();

                console.log(data);
            });

            // 如果需要格式化当前显示字段,需要 return 处理后的结果
            return value + 'a';

            // events 表格对象字段
            // events.unit: 当前单元格对象
            // events.row: 当前行对象
            // events.title: 当前单元格对应的表头对象
            // events.table: 当前表格对象
            // 可直接执行表格对象字段方法
        },
    }, {
        key: 'B',
        type: 'buttons',
        name: 'B',
        buttons: [function (unit, row, data, events) {
            // 表格buttons 字段传入表格内部按钮方法
            // unit 单元格元素的 jquery 对象。
            // row 行元素的 jquery 对象。
            // data 行数据对象
            // 按钮处理:直接传入按钮对象
            var button = '';
            if (data.B == 'AAAAA') {
                var button = $('&lt;div class="layui-btn layui-btn-sm Test" style="margin: -20px 0;"&gt;按钮1&lt;/div&gt;');
                button.click((e) => {
                    e.stopPropagation();
                    e.preventDefault();
                    icu.alert.normal({
                        text: JSON.stringify(data),
                    });
                });
            };

            // 注意:此处需要返回元素对象,进行渲染
            return button;
        }],
    }
]
    </code></pre>
    <br>
    <div class="line"></div>
    <h2>whereOptions 搜索条件参数说明</h2>
    <br>
    <pre class="line-numbers"><code class="language-js">whereOptions // 数组类型,接收form表单元素,但已经简化,舍弃过多参数
[
    {   // input 类型
        key: 'str', // 传入给搜索条件的参数
        type: 'input', // 输入类型
        labelText: '搜索条件1', // 输入框前方提示字段 ,如果不填写此项,则前置输入框字页面文字部分不显示
        // 此对象另可接收 form 表单元素全部参数
        labelWidth : 200, // 控制筛选条件前方的label框宽度
    },
    {   // select 类型
        key: 'str2', // 传入给搜索条件的参数
        type: 'select', // 输入类型
        data: 'OptionSide:Gender', // 参见select 说明
        // 此对象另可接收 form 表单元素全部参数
    }
]
    </code></pre>
    <br>
    <div class="line"></div>
    <h2>whereButtons 筛选条件按钮参数</h2>
    <br>
    <pre class="line-numbers"><code class="language-js">whereButtons // 数组类型
// whereButtons 跟随在筛选条件之后,宽度不足,自动换行处理
// event 接收两种类型
// function 类型接收事件,点击时直接执行方法 function 参数返回 表格对象
// string 类型 接收参数  search（执行搜索方法）
//                      reset（执行重置方法并刷新表格）
//                      refresh （刷新表格数据）
//                      screen （表头筛选项按钮）
//                      exportCSV （导出CSV）
//                      exportXLS （导出XLS）
//                      print （导出打印预览）
// 
[
    {
        class: 'Test', // 为按钮添加自定义class 样式
        name: '搜索', // 按钮显示文字
        event: 'search' // 按钮执行方法
        icon : 'add', // 图标
        template : '' // 传入字符串,格式化为HTML以后,生成按钮。 
        // 注:template 有数据时,忽略上方 class、name、icon 字段,可以设置为空
    }, 
    ...
]
    </code></pre>
    <br>
    <div class="line"></div>
    <h2>rightButtons 表格右侧按钮参数说明</h2>
    <br>
    <pre class="line-numbers"><code class="language-js">rightButtons // 数组类型
// rightButtons 按钮在表格顶部右侧,宽度不足,自动换行
// event 接收两种类型
// function 类型接收事件,点击时直接执行方法 function 参数返回 表格对象
// string 类型 接收参数  search（执行搜索方法）
//                      reset（执行重置方法并刷新表格）
//                      refresh （刷新表格数据）
//                      screen （表头筛选项按钮）
//                      exportCSV （导出CSV）
//                      exportXLS （导出XLS）
//                      print （导出打印预览）
// 
[
    {
        class: 'Test', // 为按钮添加自定义class 样式
        name: '搜索', // 按钮显示文字
        event: 'search' // 按钮执行方法
        icon : 'add', // 图标
        template : '' // 传入字符串,格式化为HTML以后,生成按钮。 
        // 注:template 有数据时,忽略上方 class、name、icon 字段,可以设置为空
    }, 
    ...
]
    </code></pre>
    <br>
    <div class="line"></div>
    <h2>getEvent 获取表格数据方法</h2>
    <br>
    <pre class="line-numbers"><code class="language-js">getEvent // function 类型,获取表格数据的 ajax 书写位置
getEvent: function (data, setData) {
    // data : 表格筛选数据的方法
    // setData : 为表格赋值的方法
    this.$api.getTableData(data,function(res){
        setData({
            count: res.count, // 表格总条数
            data: res.data, // 表格数据
        });
    });
},
    </code></pre>
    <br>
    <div class="line"></div>
    <h2>getEvent 表格右侧按钮参数说明</h2>
    <br>
    <pre class="line-numbers"><code class="language-js">// 表格渲染
this.$el.find('#tableText').append(__table.html);
// 表格初始化 (初始化以后进行了 数据调用方法)
__table.init();
// 为表格行添加单击方法
__table.on('rowClick', function (data, table, row) {
    // 可通过此方法清除表格样式
    for (let i = 0; i &lt; table.objs.body.childrens.length; i++) {
        const element = table.objs.body.childrens[i];
        element.html.css({
            background: '#fff',
        })
    };
    // 表格行内如果有 radio 类型,可通过此方法进行选中处理
    row.radioSelect();
    // 更改表格行的样式
    row.html.css({
        background: '#f0f0f0',
    });
});
// 为表格行添加双击方法
__table.on('rowDblclick', function (data, table, row) {
    // 参数同上
    icu.alert.normal({
        text: JSON.stringify(data),
    })
});
this.$el.find('#getCheckValue').click(() => {
    // 获取表格复选框的选中值
    var data = __table.getCheckBoxValue();
    icu.alert.normal({
        text: JSON.stringify(data),
    });
});
this.$el.find('#getRadioValue').click(() => {
    // 获取表格单选框的选中值
    var data = __table.getRadioValue();
    icu.alert.normal({
        text: JSON.stringify(data),
    })
});</code></pre>


</div>